<!-- 折线图 -->
<template>
  <div style="position: relative;">
    <p style="color: var(--text);">{{ chartTitle }}</p>
    <div :style="{ height: '450px', width: '100%' }" style="background-color: var(--background);" ref="chartEl"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, markRaw, watch, toRef } from 'vue'
import * as echarts from 'echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'

const chartEl = ref<HTMLDivElement>()

const myChart = ref()
// 可以根据父组件传过来的数据生成折线图
const props = defineProps({
  chartTitle: {
    // legend标题数据
    type: String,
    default: () => {
      return ''
    }
  },
  legendData: {
    // legend标题数据
    type: Array,
    default: () => {
      return []
    }
  },
  xAxisData: {
    // xAxis数据
    type: Array,
    default: () => {
      return []
    }
  },
  seriesData: {
    // 折线图数据
    type: Array,
    default: () => {
      return []
    }
  }
})

watch(
  [() => props.xAxisData, () => props.seriesData],
  (val) => {
    echartLine()
  },
  {
    deep: true,
    immediate: true
  }
)

function echartLine() {
  // if (!props.xAxisData.length || !props.seriesData.length) {
  //   return
  // }
  if (!chartEl.value) return // 判断是否有元素
  if (!myChart.value) {
    // 判断是否第一次加载
    myChart.value = markRaw(echarts.init(chartEl.value as HTMLDivElement))
  }
  myChart.value.setOption(
    {
      legend: {
        type: 'scroll',
        data: props.legendData,
      },
      tooltip: {
        trigger: 'axis',
        position: function (pt:any) {
          return [pt[0], '10%'];
        }
      },
      xAxis: {
        type: 'category',
        data: props.xAxisData,
        axisLabel: {
          show: true,
          // interval: 0, //   坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推
          // rotate: 60 // 标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度
          // formatter: function (value:any, index:number) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
          //   return value + "人";
          // },
        },
        axisTick: {
          show: false // 是否显示坐标轴刻度
        },
        boundaryGap: false // 让起点从 x 轴的 0 坐标开始
      },
      yAxis: {
        type: 'value',
        scale: false, // 摆脱 0 值比例
        min:'dataMin', //取最小值为最小刻度
        max: 'dataMax', //取最大值为最大刻度
      },
      series: props.seriesData
    })
}
</script>

<style scoped lang="scss"></style>
